<template>
    <div class="prepare-add i_maxW">
        <div class="prepare-crumbs">
            <router-link to="/prepare">备课<i>></i></router-link>
            <span @click="goBack">{{prepare_name}} </span>
            <span><i>></i>查看</span>
        </div>
        <div class="prepare-add-cont">
            <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            	<el-form-item label="备课类型" prop="type">
            		<el-radio-group v-model="ruleForm.type">
            			<el-radio :label="0" v-if="ruleForm.type == 0">个人备课</el-radio>
                        <el-radio :label="1" v-if="ruleForm.type == 1">集体备课</el-radio>
            		</el-radio-group>
            	</el-form-item>

                <el-form-item label="备课名称" prop="name">
                    <el-input v-model="ruleForm.name" maxlength="30" placeholder="请输入备课名称" disabled></el-input>
                </el-form-item>

                <el-form-item label="备课目标" prop="target" class="prepare-target">
                    <el-input type="textarea" :rows="4" resize="none" v-model="ruleForm.target" maxlength="200" placeholder="请输入备课目标" disabled></el-input>
                    <!-- <span><i>{{ruleForm.target.length}}</i>/200</span> -->
                </el-form-item>

                <el-form-item label="截止日期" prop="date" class="prepare-date" v-if="ruleForm.type == 1">
                   <!-- <el-date-picker type="date" placeholder="选择日期"  v-model="ruleForm.date" disabled></el-date-picker> -->
                   <el-date-picker
                    v-model="ruleForm.date"
                     type="datetime"  placeholder="选择日期" disabled
                    value-format="yyyy-MM-dd HH:mm" :picker-options="pickerOptionsStart">
                 </el-date-picker>
                </el-form-item>

               
                <el-form-item required label-width="0" class="prepare-add-select">
                    	<el-form-item label="学段" prop="section_id">
                    		<el-select v-model="ruleForm.section_id" placeholder="请选择学段" disabled>
                    			<el-option v-for="item of orgLevel2" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    		</el-select>
                    	</el-form-item>
                    	<el-form-item label="年级" prop="grade_id" >
                    		<el-select v-model="ruleForm.grade_id" placeholder="请选择年级" disabled>
                    			<el-option v-for="item of orgLevel3" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    		</el-select>
                    	</el-form-item>
                    	<el-form-item label="科目" prop="subject_id">
                    		<el-select v-model="ruleForm.subject_id" placeholder="请选择科目" disabled>
                    			<el-option v-for="item of orgSubject" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    		</el-select>
                    	</el-form-item>
                </el-form-item>

                <template v-if="ruleForm.type == 1">
                    <el-form-item label="邀请老师" prop="invitation" class="prepare-invitation">
                       <div>
                           <el-tag v-for="tag in ruleForm.teachArr" :key="tag.id" v-if="tag.teachername">
                             {{tag.teachername}}
                           </el-tag>
                       </div>
                    </el-form-item>
                </template>
                
                <template>

              		<div class="prepare-relation" v-if="videoList.length != 0">
              			<h3>视频</h3>
              			<ul>
              				<li class="prepare-relation-list clear" v-for="(item, index) of videoList" :key="index">
                                <a @click="checkLook(item.res_id, 0, item.status_m3u8)"  class="fl">{{item.videoname}}</a>
                                <a :href="download(0, item.res_id)" class="el-icon-download fr" slot="reference"></a>
              				</li>
              			</ul>
              		</div>

              		<div class="prepare-relation" v-if="testList.length != 0">
              			<h3>试卷</h3>
              			<ul>
              				<li class="prepare-relation-list clear" v-for="(item, index) of testList" :key="index">
                                <a @click="checkLook(item.res_id, 1)"  class="fl">{{item.videoname}}</a>
                                <a :href="download(1, item.res_id)" class="el-icon-download fr" slot="reference"></a>
                            </li>
              			</ul>
              		</div>

              		<div class="prepare-relation" v-if="resourceList.length != 0">
              			<h3>资源</h3>
              			<ul>
              				<li class="prepare-relation-list clear" v-for="(item, index) of resourceList" :key="index">
                                <a @click="checkLook(item.res_id, 2)"  class="fl">{{item.videoname}}</a>
                                <a :href="download(2, item.res_id)" class="el-icon-download fr"  slot="reference"></a>
                            </li>
              			</ul>
              		</div>
                </template>

            </el-form>
        </div>

    </div>
</template>

<script>

	export default {
	    data() {
	        return {
	            ruleForm: {
	                type: 0,
	                name: '',
	                target: '',
                    date: '',
	                section_id: '',
	                grade_id: '',
	                subject_id: '',
                    teachArr: [],
	                videoArr: [],
	                testArr: [],
	                resourceArr: []
	            },
                type_n: this.$route.query.type,
                orgLevel2: [],
                orgLevelParam:{ //获取学段,年纪参数
                    level:2,
                    pid:1,
                    direction:'balance',
                },

                orgLevel3: [],
                orgSubject: [],
                subjectParam:{ //获取科目,版本，参数
                    type:2,
                    org_id:4,
                    status:1,
                },
                prepare_name: '',
                videoList: [],
                resourceList: [],
                testList: []
	        };
	    },
        created(){
           
            this.get_prepare()

        },  
	    methods: {
            //获取视频
            get_videoList(){
                let success = (res=>{
                    this.videoList = res.data.data
                });
                this.$ajax({
                    url: 'api/prepare/prepare_resource_list',
                    method: 'get',
                    params:{
                       prepareid: this.$route.query.id,
                       userid: this.$g.user_id,
                       origin: 0,
                       page_size: 0
                    },
                    func: {success: success}
                })
            },
            /*
                获取资源
             */
            get_resourceList(){
                let success = (res=>{
                    this.resourceList = res.data.data
                });
                this.$ajax({
                    url: 'api/prepare/prepare_resource_list',
                    method: 'get',
                    params:{
                       prepareid: this.$route.query.id,
                       userid: this.$g.user_id,
                       origin: 2,
                       page_size: 0
                    },
                    func: {success: success}
                })
            },
            /*
                获取试卷
             */
            get_testList(){
                let success = (res=>{
                    this.testList = res.data.data
                });
                this.$ajax({
                    url: 'api/prepare/prepare_resource_list',
                    method: 'get',
                    params:{
                       prepareid: this.$route.query.id,
                       userid: this.$g.user_id,
                       origin: 1,
                       page_size: 0
                    },
                    func: {success: success}
                })
            },
            /*
                获取数据详情
             */
            get_prepare(){
                let success = (res=>{

                    this.ruleForm.type = res.data.type;
                    this.ruleForm.name = res.data.prepare_name;
                    this.ruleForm.target = res.data.profile;
                    this.ruleForm.date = res.data.end_time;
                    this.ruleForm.section_id = res.data.study_section_id;
                    this.ruleForm.grade_id = res.data.grade_id;
                    this.ruleForm.subject_id = res.data.subject_id;
                    this.prepare_name = res.data.prepare_name
                    this.getOrgLevel2()
                    this.getprepare_teacher()
                    this.get_videoList()
                    this.get_resourceList()
                    this.get_testList()
                });

                this.$ajax({
                    url: 'api/prepare/prepare',
                    method: 'get',
                    params: {prepareid: this.$route.query.id},
                    func: {success: success}
                })
            },
            getprepare_teacher(){
                let success = (res=>{
                    this.ruleForm.teachArr = res.data
                });
                this.$ajax({
                    url: 'api/prepare/getprepare_teacher',
                    method: 'get',
                    params: {prepareid: this.$route.query.id},
                    func: {success: success}
                })
            },
            //获取学段
            getOrgLevel2(){
                let success = (res=>{
                    this.orgLevel2 = res.data
                    this.getOrgLevel3()
                });
                this.$ajax({
                    url:'api/org/org',
                    method: 'get',
                    params: this.orgLevelParam,
                    func: {success: success}
                })
            },
            //获取年级
            getOrgLevel3(){
                this.orgLevelParam.level = 3;
                this.orgLevelParam.pid = this.ruleForm.section_id;

                let success = (res=>{
                    this.orgLevel3 = res.data;
                    this.getSubject()
                })

                this.$ajax({
                    url:'api/org/org',
                    method: 'get',
                    params: this.orgLevelParam,
                    func: {success: success}
                })

            },
            //获取科目
            getSubject(){
                this.subjectParam.org_id = this.ruleForm.grade_id;
                let success = ( res=>{
                    this.orgSubject = res.data;
                })
                this.$ajax({
                    url:'api/cate/subject',
                    method: 'get',
                    params: this.subjectParam,
                    func: {success: success}
                })
            },
            goBack(){
                this.$router.back(-1)
            },
            /*
                查看
             */
            checkLook(id, type,status_m3u8){
               let host = sessionStorage.getItem( 'host' )
               let redirectParams = sessionStorage.getItem( 'redirect_params' )

               let link = ''

                switch(type){
                    case 0: 
                       this.goToDetailPage(status_m3u8, id)//全局方法
                        break;
                    case 1: 
                        link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/test/details&id=${id}`
                        window.open(link)
                        break;
                    case 2: 
                          link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/resourceDetail&id=${id}`
                          window.open(link)
                        break;
                }

                 
            },
            /* 下载 */
            download(type,id){
                switch(type){
                    case 0: 
                        return `${this.BASE_URL}/index/openclass/videodownload?id=${id}`;
                        break;
                    case 1: 
                        return `${this.BASE_URL}/index/test/download_test?id=${id}`;
                        break;
                    case 2: 
                        return `${this.BASE_URL}/index/resource/resourcedownload?id=${id}`;
                        break;
                }
            },
	    }
	}
</script>